<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css小三角</title>
    <style>
        .box {
            margin: 20px 0 50px 200px;
        }


        .top-triangle {
            width: 0;
            height: 0;
            border: 30px solid pink;
            border-right-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;

        }

        .right-triangle {
            width: 0;
            height: 0;
            border: 30px solid pink;
            border-top-color: transparent;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }

        .bottom-triangle {
            width: 0;
            height: 0;
            border: 30px solid pink;
            border-top-color: transparent;
            border-right-color: transparent;
            border-left-color: transparent;
        }

        .left-triangle {
            width: 0;
            height: 0;
            border: 30px solid pink;
            border-top-color: transparent;
            border-right-color: transparent;
            border-bottom-color: transparent;
        }

        .rt1 {
            width: 0;
            height: 0;
            border: 30px solid pink;
            border-top-color: transparent;
            border-right-color: transparent;
        }

        .rt2 {
            width: 0;
            height: 0;
            border: 30px solid pink;
            border-bottom-color: transparent;
            border-left-color: transparent;
        }
    </style>
</head>

<body>
    <div class="box">
        <p>上三角</p>
        <div class="top-triangle"></div>
        <p>右三角</p>
        <div class="right-triangle"></div>
        <p>下三角</p>
        <div class="bottom-triangle"></div>
        <p>左三角</p>
        <div class="left-triangle"></div>
        <p>直角三角1</p>
        <div class="rt1"></div>
        <p>直角三角2</p>
        <div class="rt2"></div>
    </div>
</body>

</html>